<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">{{
        item
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索 -->
    <el-card class="mt">
      <el-row>
        <el-col :span="8">
          <!-- 搜索框 -->
          <el-input placeholder="手机号、姓名、角色类型">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :offset="8" :span="8">
          <el-button type="primary" @click="addNew">新建</el-button>
          <el-button :disabled="!selected.length">启动</el-button>
          <el-button :disabled="!selected.length">冻结</el-button>
          <el-button :disabled="!selected.length">删除</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 数据表格 -->
    <el-card class="mt">
      <el-table :data="allList" @select="select" @select-all="selectAll">
        <el-table-column type="selection"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="account" label="账户"></el-table-column>
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="character" label="角色"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column prop="reason" label="创建原因"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">{{
            scope.row.status == 2 ? "未启用" : "已启用"
          }}</template>
        </el-table-column>
        <el-table-column label="操作" width="230px">
          <template slot-scope="scope">
            <el-button size="small" @click="change(scope.row)">编辑</el-button>
            <el-button type="danger" size="small">删除</el-button>
            <el-button size="small">
              {{ scope.row.status == 1 ? "禁用" : "启用" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :visible="visible" title="新建角色" @close="close" @click="change">
      <el-form :model="form" :rules="formRules" ref="rulesForm">
        <el-form-item label="角色：" label-width="100px" prop="character">
          <el-select v-model="form.character" style="width:100%" placeholder="新建角色">
            <el-option label="业务人员" value="1"></el-option>
            <el-option label="审核人员" value="2"></el-option>
            <el-option label="风控经理" value="3"></el-option>
            <el-option label="管理员" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" label-width="100px" prop="remark">
          <el-input v-model.trim="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建原因：" label-width="100px" prop="reason">
          <el-input type="textarea" v-model.trim="form.reason" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button class="mr" @click="close">取消</el-button>
          <el-button type="primary" class="mr" @click="onOk">确定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import breadCrumb from "@/mixins/breadCrumb.js";
import { get } from "@/utils/http.js";
export default {
  data() {
    return {
      disabled: true,
      allList: [],
      total: '',
      selected: [],
      visible:false,
      form:{
        character:'',
        remark:'',
        reason:''
      },
      formRules:{
        character:[{required:true,message:"请选择角色",trigger:'change'}],
        remark:[{required:true,message:"请填写备注"}],
        reason:[{required:true,message:"请添加描述内容"}]

      }
    };
  },
  mixins: [breadCrumb],
  mounted() {
    // 获取全部人员数据
    this.list()
    
    
  },
  methods: {
    list(){
      get("/all").then((res) => {
      if (res.success) {
        this.allList = res.data.list;
        this.total = res.data.total;
      }
    });
    },
    // 选择当前行的人员数据
    select(select) {
      this.selected = select;
    },
    // 选择所有人员数据
    selectAll(selection) {
      this.selected = selection;
    },
    // 新增角色
    addNew(){
      this.$nextTick(()=>{
        this.form.character=' '
        this.form.remark=' '
        this.form.reason=' '
        this.visible = true
      })
      
    },
    // 关闭
    close(){
      this.$nextTick(()=>{
        this.$refs['rulesForm'].resetFields()
      })
      this.visible = false
    },
    // 编辑角色
    change(row){
      this.visible = true
      this.form.character = row.character
      this.form.remark = row.remark
      this.form.reason = row.reason

    },
    // 验证提交表单
    onOk(){
      this.$refs['rulesForm'].validate((valid)=>{
        if(valid){
          this.$message.success("创建成功")
          this.list();
          this.visible = false
      
          this.$refs['rulesForm'].resetFields()
        }
      })
    }
  },
};
</script>

<style lang="less" scoped></style>
